<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Ongoing Exam View</title>
<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
</head>
<body>
	<c:set var="user" value="${sessionScope.user}"/>
	<c:if test="${user.userType ne 'Professor'}" >
		<c:redirect url="LoginServlet"></c:redirect>
	</c:if>
	<c:set var="examResponses" value="${requestScope.examResponses}"></c:set>

	<div id="header"><%@ include file="Header.jsp"%></div>
	<div id="content">
	<div id="navbar"><%@ include file="NavigationBar.jsp"%></div>
	
	<div id="main">

		
		<div class="box">
			<div class="box-header well">
				<h2><i class="icon-list-alt"></i> Ongoing Exam</h2>
				<div class="box-icon">
					<a href="#" class="btn btn-minimize btn-round"><i class="icon-chevron-up"></i></a>
				</div>
			</div>
			<div class="box-content">
				<form class="form-horizontal">
					<fieldset>
						<div class="control-group">
							<label class="control-label">Exam Details:</label>
							<br><br>
							<label class="control-label">Exam ID</label>
							<div class="controls">
								<div class="alert alert-info" style="width:230px;">${examResponses.get(0).getExam().examId}</div>
							</div>
							<label class="control-label">Exam Name</label>
							<div class="controls">
								<div class="alert alert-info" style="width:230px;">${examResponses.get(0).getExam().examName}</div>
							</div>
						</div>
					</fieldset>	  
				</form>
				<hr></hr>
				<table class="table table-striped table-bordered bootstrap-datatable datatable">
					<thead>
						<tr>
							<th>Student ID</th>
							<th>Student Name</th>
							<th>Student</th>
						</tr>
					</thead>   
					<tbody>
						<c:forEach var="examResponse" items="${examResponses}">
							<tr>
								<td>${examResponse.getStudent().userId}</td>
								<td>${examResponse.getStudent().firstName} ${examResponse.getStudent().lastName}</td>
								<td id="status${examResponse.examResponseId}">
									<c:choose>
										<c:when test="${examResponse.complete eq true}">
											Taken - ${examResponse.dateTaken}
										</c:when>
										<c:otherwise>
											In Progress
										</c:otherwise>
									</c:choose>
								</td>
							</tr>
						</c:forEach>
					</tbody>
				</table>
			</div>
		</div>
	</div>
	</div>
	<script>
	function update() {
		$.post("OngoingExamViewServlet",
				{
					exam_id:"${examResponses.get(0).getExam().getExamId()}"
				},
				function(data) {
					if(data != null) {
						var entries = data.split(",");
						for(var i = 0; i < entries.length; i++) {
							var values = entries[i].split(":");
							$("#status"+values[0]).empty().append("Completed - " + values[1]);
						}
					}
		});
	}
	
	$(document).ready(function() {
		setInterval(update(), 2000);
	});
	</script>
</body>
</html>